<template>
	<view>
		<view class="u-skeleton">
			<!-- 导航栏 -->
			<u-navbar :is-back="false" title="" :background="background">
				<view class="slot-wrap">
					<view class="left" @click="navTo('back')">
						<view class="iconfont iconfanhui"></view>
					</view>
					<view class="title">
						<view class="text">我的订单</view>
						<view class="iconfont iconsanjiao"></view>
					</view>
				</view>
			</u-navbar>
			<view>
				<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
				<!-- <me-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></me-tabs> -->
				<v-tabs class="u-skeleton-fillet" v-model="tabIndex" :tabs="tab" @change="changeTab" height="90rpx" :fixed="true" :scroll="false" color="#4d4d4d" activeColor="#d9b975" lineColor="#d9b975" lineHeight="6rpx" :lineScale="0.45" bgColor="#fff"></v-tabs>
				
				<view style="margin-top: 0rpx;" class="order-con">
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
						<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
							<swiper-item v-for="(tab,i) in tabs" :key="i">
								<!-- <mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item> -->
								<view class="list" v-for="(item, index) in tab.orderList" :key="index">
									<view class="title u-skeleton-fillet">订单{{ item.ordersn }}</view>
									<view class="info" @click="navTo('detail', item)">
										<image class="img u-skeleton-circle" :src="item.team_avatar || require('../../static/images/avatar.png')" mode=""></image>
										<view class="introduce">
											<view class="tit fw u-skeleton-fillet">
												<text v-if="item.type == 0">图文咨询</text>
												<text v-if="item.type == 1">电话咨询</text>
												<text v-if="item.type == 2">文书服务</text>
												<text v-if="item.type == 3">律师函</text>
												<text v-if="item.type == 4">案件委托</text>
												<text v-if="item.type == 5">企业服务</text>
												<text v-if="item.tag_name">——{{ item.tag_name }}</text>
											</view>
											<view class="ser u-skeleton-fillet">
												本单由
												<text>{{ item.team_name }}</text>
												提供服务
											</view>
											<view class="time u-skeleton-fillet">{{ item.create_time }}</view>
										</view>
									</view>
									<view class="btn-con">
										
										<view class="comment u-skeleton-fillet" v-if="item.status===0" @click="navTo('close', item)">关闭订单</view>
										<view class="comment u-skeleton-fillet" v-if="item.status===3 && !item.appraisal" @click="navTo('comment', item)">服务评价</view>
										<view class="comment u-skeleton-fillet" v-if="item.status===0" @click="navTo('pay', item)">点击支付</view>
										<view class="comment u-skeleton-fillet" v-if="item.status===1 || item.status===2" @click="navTo('finish', item)">确认完成</view>
										<view class="detail u-skeleton-fillet" @click="navTo('detail', item)">查看详情</view>
									</view>
								</view>
								<view class="empty" v-show="tab.orderList.length === 0">
									<image src="../../static/images/empty_order.png" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
					</mescroll-body>
				</view>
			</view>
			<u-modal v-model="showModal" :content="contentText" :show-cancel-button="true" @confirm="closeConfirm"></u-modal>
			<popup-pay :popShow="popShow" :money="money" @closePopup="closePopup" @confirmPay="confirmPay"></popup-pay>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import MescrollItem from "@/components/tabs/mescroll-swiper-item.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import vTabs from "@/components/tabs/v-tabs.vue"
	import popupPay from '@/components/popup-pay/popup-pay.vue'
	import { orderListClient, orderClose, orderPay, orderFinish } from '@/api/orderApi.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null,
				upOption: {
					use: true,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: ''
				},
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
				loading: true, // 是否显示骨架屏组件
				background: {
					backgroundColor: '#0d2647',
				},
				tab: ['全部', '待付款', '进行中', '已完成'],
				height: "400px", // 需要固定swiper的高度
				tabs: [
					{
						name:'全部',
						orderList: [
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队02",
								tag_name: "婚姻家事"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队03",
								tag_name: "企业服务"
							}
						],
						total: 0,
						orderForm: {p: 1,length: 10,status: ''}
					},
					{
						name:'代付款',
						orderList: [
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							}
						],
						total: 0,
						orderForm: {p: 1,length: 10,status: 0},
					},
					{
						name:'进行中',
						orderList: [
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							}
						],
						total: 0,
						orderForm: {p: 1,length: 10,status: 2},
					},
					{
						name:'已完成',
						orderList: [
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							},
							{
								ordersn: "AR1610070405609238",
								create_time: "2021-01-08 09:46:45",
								team_name: "高级团队01",
								tag_name: "行政诉讼"
							}
						],
						total: 0,
						orderForm: {p: 1,length: 10,status: 3},
					},
				],
				tabIndex: 0 ,// 当前tab的下标
				showModal: false, // 关闭订单的模态框
				contentText: '确认关闭订单吗？',
				orderId: '',
				popShow: false,
				btnDisabled: false,
				money: {}, // 弹出的余额和价格
				isFinish: false, // 是否点击完成订单
			}
		},
		onShow() {
			// this._orderListClient() // 获取订单列表
			this.mescroll.triggerDownScroll()
		},
		onLoad(options) {
			console.log(options)
			this.tabIndex = options.status - 0
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
			// this.height = 386 * 1 + 50 + 'rpx'
			this._orderListClient() // 获取订单列表
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			async _orderListClient() {
				console.log(this.tabs[this.tabIndex].orderForm)
				const res = await orderListClient(this.tabs[this.tabIndex].orderForm)
				if (this.tabs[this.tabIndex].orderForm.p === 1) {
					this.tabs[this.tabIndex].orderList = []
				}
				this.tabs[this.tabIndex].orderList = [...this.tabs[this.tabIndex].orderList, ...res.data.data.list]
				this.tabs[this.tabIndex].orderList.forEach(item => {
					item.paytypes = res.data.data.paytypes
				})
				this.tabs[this.tabIndex].total = res.data.data.total
				if (this.tabs[this.tabIndex].orderList.length > 3) {
					this.height = 386 * this.tabs[this.tabIndex].orderList.length + 50 + 'rpx' // swiper 高度
				} else {
					this.height = uni.getSystemInfoSync().windowHeight + 'px'
				}
				if (this.tabs[this.tabIndex].orderList.length === this.tabs[this.tabIndex].total) {
					this.mescroll.endSuccess(res.data.data.list, false)
				} else {
					this.mescroll.endSuccess(res.data.data.list, true)
				}
				setTimeout(() => {
					this.loading = false
				}, 1000)
				console.log(res)
			},
			navTo(option,item) {
				if (option === 'back') {
					uni.navigateBack()
				} else if (option === 'detail') {
					// console.log(item)
					uni.navigateTo({url: `/pages/order/order-detail?id=${item.id}`})
				} else if (option === 'close') {
					console.log(item)
					this.showModal = true
					this.orderId = item.id
				} else if (option === 'pay') {
					console.log(item)
					this.popShow = true
					this.orderId = item.id
					this.money = item
				} else if (option === 'finish') {
					console.log(item)
					this.orderId = item.id
					this.showModal = true
					this.contentText = '完成该订单？'
					this.isFinish = true
				} else if (option === 'comment') {
					console.log(item)
					if (item.appraisal) return uni.showToast({title: '您已评价',icon: 'none'})
					this.orderId = item.id
					uni.navigateTo({url: `/pages/order/comment?orderId=${item.id}`})
				}
			},
			async closeConfirm() {
				uni.showLoading({title: '加载中...'})
				if (this.isFinish) {
					console.log('wanc')
					const res = await orderFinish({id: this.orderId})
					uni.showToast({title: '订单已完成',icon: 'none'})
					this.isFinish = false //  成功后必须设置false
					// for (let i in this.tabs[this.tabIndex].orderList) {
					// 	console.log(this.tabs[this.tabIndex].orderList[i])
					// 	if (this.tabs[this.tabIndex].orderList[i].id === this.orderId) {
					// 		this.tabs[this.tabIndex].orderList[i].status = 3
					// 		break
					// 	}
					// }
					this.tabs[this.tabIndex].orderList = this.tabs[this.tabIndex].orderList.filter(item => item.id !== this.orderId)
				} else {
					const res = await orderClose({id: this.orderId})
					uni.showToast({title: '关闭成功',icon: 'none'})
					for (let i in this.tabs[this.tabIndex].orderList) {
						console.log(this.tabs[this.tabIndex].orderList[i])
						if (this.tabs[this.tabIndex].orderList[i].id === this.orderId) {
							this.tabs[this.tabIndex].orderList[i].status = 4
							break
						}
					}
				}
			},
			swiperChange(e){
				console.log(e)
				this.tabIndex = e.detail.current
				this.mescroll.endBySize(10, this.tabs[this.tabIndex].total) // 表示还有下一页
				if (this.tabs[this.tabIndex].orderList.length > 3) {
					this.height = 386 * this.tabs[this.tabIndex].orderList.length + 50 + 'rpx' // swiper 高度
				} else {
					this.height = uni.getSystemInfoSync().windowHeight + 'px'
				}
				// if (this.tabs[this.tabIndex].orderList.length <= 3) {
				// 	uni.showLoading({title: '加载中...'})
				// 	this._orderListClient()
				// }
				this.tabs[this.tabIndex].orderForm.p = 1
				uni.showLoading({title: '加载中...'})
				this._orderListClient()
				
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			downCallback(page) {
				console.log(this.tabIndex)
				this.tabs[this.tabIndex].orderForm.p = 1
				this._orderListClient()
				// setTimeout(() => {
				// 	this.mescroll.endSuccess(10, true)
				// }, 2000)
				console.log('下拉刷新')
				console.log(page)
				// console.log(this.downOption.page)
			},
			upCallback(page) {
				console.log('加载更多')
				console.log(page)
				this.tabs[this.tabIndex].orderForm.p++
				this._orderListClient()
				// setTimeout(() => {
				// 	this.mescroll.endSuccess(10, true)
				// }, 2000)
				// this.messageList = this.messageList.concat(data)
				// this.mescroll && this.mescroll.endSuccess(data.length)
			},
			closePopup(data) {
				console.log(data)
				this.popShow = data
				this.btnDisabled = false
			},
			async confirmPay(e) {
				console.log(e)
				this.popShow = e.popShow
				uni.showLoading({title: '加载中...'})
				const res = await orderPay({id: this.orderId-0, paytype: e.paymentWay})
				console.log(res)
				if (res.data.data.price == 0) return uni.navigateTo({url: '/pages/order/pay-success?orderId='+this.orderId})
				// #ifdef APP-PLUS
				if (e.paymentWay === 3) {
					// 微信支付
					this.$utils.appWxPay(res.data.data.appConfig, (success)=> {
						console.log(success)
						// uni.navigateTo({url: '/pages/order/pay-success'})
					}, (error) => {
						console.log(error)
					})
				} else if (e.paymentWay === 2) {
					console.log('支付宝支付')
				} else if (e.paymentWay === 1) {
					console.log('余额支付')
					uni.navigateTo({url: '/pages/order/pay-success?orderId=' + res.data.data.id})
				}
				// #endif
				
			},
		},
		components: {
			MescrollItem,
			vTabs,
			popupPay
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		color: #fff;
		.left {
			.iconfanhui {
				font-size: 40rpx;
			}
		}
		.title {
			display: flex;
			font-size: 38rpx;
			margin: 0 auto;
			align-items: center;
			.iconsanjiao {
				font-size: 14rpx;
				margin-top: 10rpx;
				margin-left: 8rpx;
			}
		}
	}
	// 订单
	.order-con {
		.empty {
			width: 444rpx;
			height: 314rpx;
			margin: 200rpx auto 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.list {
		background-color: #fff;
		padding: 0 30rpx;
		height: 366rpx;
		margin: 20rpx 0;
		.title {
			font-size: 28rpx;
			color: #989898;
			height: 70rpx;
			line-height: 70rpx;
			border-bottom: 1rpx solid #f6f7f9;
		}
		.info {
			display: flex;
			height: 190rpx;
			align-items: center;
			border-bottom: 1rpx solid #f6f7f9;
			.img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 6rpx;
				margin-right: 22rpx;
			}
			.introduce {
				.tit {
					font-size: 30rpx;
					color: #3e3e3e;
				}
				.ser {
					font-size: 24rpx;
					color: #999;
					margin: 10rpx 0 22rpx;
					text {
						color: #5b5e67;
						padding: 0 15rpx;
					}
				}
				.time {
					font-size: 26rpx;
					color: #989898;
				}
			}
		}
		.btn-con {
			display: flex;
			height: 100rpx;
			align-items: center;
			font-size: 24rpx;
			justify-content: flex-end;
			view {
				width: 130rpx;
				height: 50rpx;
				border-radius: 4rpx;
				// line-height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				&:active {
					opacity: .9;
				}
			}
			.comment {
				background-color: #0d2647;
				color: #fff;
				border: solid 1rpx #0d2647;
				margin-left: 28rpx;
			}
			.detail {
				background-color: #fff;
				color: #3e3e3e;
				border: solid 1rpx #999;
				margin-left: 28rpx;
			}
		}
	}
</style>
